<template>
  <div class="Map">
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="Map">
import { onMounted, ref, getCurrentInstance, inject, effect } from 'vue'
import 'echarts-liquidfill'
import axios from 'axios'
let titleValue = ref('实时用户统计')
let people = ref('291021人')
let MapArr = ref([])
const charts = ref()
const hasMapArr = async () => {}
const initEchartsOneFn = async () => {
  const Echarts = inject('$echarts')
  let result = await axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
  MapArr.value = result.data
  Echarts.registerMap('china', MapArr.value)
  let myChart = (Echarts as any).init(charts.value)
  const option = {
    geo: {
      zoom: 1.2, //缩放大小d
      top: 115, //向上偏移量
      map: 'china', //使用哪个地图数据
      roam: true, //是否缩放
      //地图上文字的显示
      label: {
        show: true,
        color: 'red',
        fontSize: 16
      },
      itemStyle: {
        areaColor: '#f9ebea '
      },
      emphasis: {
        disabled: false,
        label: {
          fontSize: 40
        },
        itemStyle: {
          areaColor: 'red'
        }
      }
    } /*  */,
    series: {
      type: 'lines', //航线的系列
      polyline: true,
      effect: {
        show: true,
        symbol:
          'path://M710.684108 957.190385c-1.619894 0-3.248997-0.191358-4.860704-0.582261-7.05058-1.714038-12.676717-7.013741-14.806217-13.947663L574.782905 564.385091 435.985746 682.001859l1.680269 204.552769c0.044002 5.451152-2.076288 10.69969-5.898337 14.58723l-34.361599 34.976606c-4.898567 4.986571-11.995195 7.14677-18.839067 5.730515-6.845918-1.414209-12.504802-6.206352-15.027252-12.726859l-74.372871-192.261838-199.609177-85.742826c-6.227842-2.675946-10.738575-8.245801-12.059664-14.894222-1.321088-6.64842 0.716314-13.519921 5.448082-18.374486l34.223452-35.101449c4.117784-4.221138 9.865695-6.465249 15.738449-6.186909l209.368448 10.253528 117.92376-144.683217L79.288834 321.166697c-6.809079-2.164293-12.009522-7.703449-13.735839-14.635325-1.728364-6.931876 0.264013-14.263865 5.26184-19.36914l65.386196-66.780963c4.374634-4.466732 10.543124-6.696516 16.762779-6.078439l469.724151 47.295166 133.106554-133.416616c53.017494-53.638641 103.833857-62.058404 129.411395-62.058404 0.12689 0 0.252757 0 0.379647 0 23.74275 0 44.731784 7.024997 56.20407 18.49626 27.703969 27.702945 26.328645 106.726743-48.302099 182.862771-0.052189 0.054235-0.104377 0.155543-0.158612 0.207731L759.046582 401.75513l37.570687 466.417849c0.477884 5.939269-1.641383 11.800767-5.810333 16.055674l-65.425082 66.781986C721.463616 955.008696 716.145493 957.190385 710.684108 957.190385zM585.288167 507.941568c1.933025 0 3.877307 0.271176 5.780657 0.829901 6.636141 1.943258 11.852956 7.090489 13.884218 13.701047l115.239628 375.038652 34.655288-35.372625-37.58092-466.543715c-0.484024-6.02011 1.699712-11.9471 5.973038-16.21224l140.944056-140.691299c34.582633-35.310204 46.758953-66.294892 50.881854-86.074378 5.081739-24.379247-0.685615-36.917818-2.385327-38.714743-7.572466-7.455809-65.029062-19.966751-127.676891 43.456744-0.026606 0.027629-0.054235 0.056282-0.082888 0.083911L644.895753 297.589722c-4.366448 4.370541-10.466376 6.550183-16.616446 5.92699l-469.596238-47.279816-35.077913 35.826973 377.883443 120.004141c6.493901 2.064009 11.544941 7.203052 13.490246 13.732769 1.947352 6.52767 0.534166 13.594623-3.767813 18.874883L367.604332 620.871593c-4.130064 5.069459-10.41828 7.860015-16.95516 7.553023l-210.489992-10.307763-6.839779 7.014764 180.036399 77.333296c5.083785 2.183735 9.072633 6.323009 11.069103 11.482519l65.98483 170.579003 6.03853-6.145977-1.688455-205.676359c-0.050142-6.106068 2.613524-11.918447 7.272637-15.865339l169.95274-144.018068C575.747883 509.629 580.477604 507.941568 585.288167 507.941568z',
        symbolSize: 30, //动画大小
        color: 'red',
        period: 10 //动画时间
      },
      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [113.280637, 23.125178] // 终点

            // 如果 polyline 为 true 还可以设置更多的点
          ],
          lineStyle: {
            color: 'blue',
            width: 5
          }
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [104.065735, 30.659462] // 终点

            // 如果 polyline 为 true 还可以设置更多的点
          ],
          lineStyle: {
            color: 'blue',
            width: 5
          }
        }
      ]
    }
  }
  myChart.setOption(option)
}
onMounted(() => {
  hasMapArr()
  initEchartsOneFn()
})
</script>

<style scoped>
.Map {
  .charts {
    width: 100%;
    height: 800px;
  }
}
</style>
